<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="${ctx}/static/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="${ctx}/static/jqweui/css/weui.css">
    <link rel="stylesheet" href="${ctx}/static/jqweui/css/jquery-weui.css">
    <link rel="stylesheet" href="${ctx}/static/jqweui/css/icard.css?v=${cssVersion}">
    <link rel="stylesheet" href="${ctx}/static/font-awesome-4.7.0/css/font-awesome.css">

    <title>上传人员Excel信息</title>

    <style>
        .weui-dialog.weui-dialog--visible{
            width: 90%;
            max-width: 500px;
        }

        .weui-media-box:before{
            display: none;
        }
        .weui-media-box:after{
            content: " ";
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            height: 1px;
            border-top: 1px solid #E5E5E5;
            color: #E5E5E5;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            left: 15px;
        }

        .weui-uploader__input-box:before{
            display: none;
        }
        .weui-uploader__input-box:after{
            display: none;
        }
        .weui-label{
            font-weight: 400;
            margin-bottom: 0px;
        }

        .toolbar-inner h1{
            margin-top: 0px;
            margin-bottom: 0px;
            margin-block-end: 0px;
            margin-block-start: 0px;
        }

        .weui-check_label {
            font-weight:400;
        }

        .toolbar .picker-button {
            color: #2e6da4 ;
        }

        .weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before {
            color: #2e6da4;
        }

        .picker-calendar-day.picker-calendar-day-selected span {
            background: #2e6da4;
        }

        i.icon.icon-next {
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2015%2015'%3E%3Cg%3E%3Cpath%20fill%3D'%232e6da4'%20d%3D'M1%2C1.6l11.8%2C5.8L1%2C13.4V1.6%20M0%2C0v15l15-7.6L0%2C0L0%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
        }
        i.icon.icon-prev {
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2015%2015'%3E%3Cg%3E%3Cpath%20fill%3D'%232e6da4'%20d%3D'M14%2C1.6v11.8L2.2%2C7.6L14%2C1.6%20M15%2C0L0%2C7.6L15%2C15V0L15%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
        }

        .weui-uploader__input{
            position:absolute;
            background-color: #ff6600;
            z-index:1;
            top:0;
            left:0;
            width:100%;
            height:100%;
            opacity:0;
            -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
        }

        .weui-uploader__input-box{
            float:left;
            position:relative;
            margin-right:9px;
            margin-bottom:9px;
            width:77px;
            height:77px;
            border:1px solid #D9D9D9;
        }

        .weui-uploader__input-box:before{
            width:2px;
            height:39.5px;
        }
        .weui-uploader__input-box:after{
            width:39.5px;
            height:2px;
        }
    </style>
</head>
<body>

<form id="uploadForm" action="${ctx}/face/saveExcel" method="post" enctype="multipart/form-data">


    <div class = "block-title" style="display: table; width: 100%;  text-align: left;height: 40px;">
        <div  style="color:#666666;font-size: 16px;display: table-cell; vertical-align: middle;padding-left: 15px;">
            请上传需要重新录入人脸的人员信息
        </div>
    </div>
    <!--<div class="weui-uploader__input-box " >
        <input class="weui-uploader__input" id="file" name="file" type="file" placeholder="选择文件" style="background: #ff6600"></input>
    </div>-->

    <input id="file" name="file" type="file" placeholder="选择文件" style="background: #999999;margin-left: 15px;margin-top: 20px;"></input>
    <div class="weui-btn-area " style="margin-bottom: 20px;">
        <input class="weui-btn weui-btn_primary btn-color-light-blue" id="submitBtn" type="submit"></input>
    </div>

</form>


<script src="${ctx}/static/jqweui/js/jquery-2.1.4.js"></script>
<script src="${ctx}/static/jqweui/js/jquery-weui.js?v=1.3"></script>
<script src="${ctx}/static/handlerbars.min.js"></script>
<script src="${ctx}/static/bootstrap/js/bootstrap.js"></script>
<script src="${ctx}/static/bootstrap/js/bootstrap-suggest.min.js"></script>
<script src="${ctx}/static/jquery.qrcode.min.js"></script>
<script type="text/javascript">




    $(function () {

    });

    var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
    var maxSize = 4096 * 2048;
    // 图片最大宽度
    var maxWidth = 300;
    // 最大上传图片数量
    var maxCount = 1;

    // 抓取模板数据




    function chooseImg(event,obj){
        var $thisObj = $(obj).parent();
        var files = event.target.files;
        if (files.length === 0) {
            return;
        }
        var file = files[0];
        var reader = new FileReader();
        if (allowTypes.indexOf(file.type) === -1) {
            $.alert("该类型不允许上传！", "警告！");
            return;
        }

        if (file.size > maxSize) {
            $.alert("图片太大，不允许上传", "警告！");
            return;
        }

        reader.readAsDataURL(file);
        reader.onload = function (e) {
            var img = new Image();
            img.src = e.target.result;
            img.onload = function () {
                // 不要超出最大宽度
                var w = Math.min(maxWidth, img.width);
                // 高度按比例计算
                var h = img.height * (w / img.width);
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                // 设置 canvas 的宽度和高度
                canvas.width = w;
                canvas.height = h;
                ctx.drawImage(img, 0, 0, w, h);

                var base64 = canvas.toDataURL('image/jpeg',0.8);
                // 插入到预览区
                //console.log(base64);
                $thisObj.attr("style","width:"+w+"px;height: "+h+"px;float: right;margin-top: 9px;margin-left: 9px;margin-right: 0px;background-image:url('" + base64 +" ')");

                var base64Data = base64.substr(base64.indexOf(",")+1);
                console.log(base64Data);
                $thisObj.parent().parent().find('.photoBase64').val(base64Data);
            };


        };

    }


    $("#submitBtn").on("click",function(){

        $.ajax({
            url : "${ctx}/home/testOk",
            type : "POST",
            dataType:'json',
            data:$('#reservationForm').serialize(),
            success : function(data) {
                if (data.success) {
                    window.history.go(-1);
                } else {
                    alert(data.message);
                }
            },
            error : function(data) {

            }
        });
    });


</script>
</body>
</html>
